<template>
  <div class="Fans">
    <h3 class="h3">
      <div><span class="tag"></span> 粉丝数据总览</div>
    </h3>
    <el-row class="cardRow" :gutter="20">
      <el-col :span="6">
        <div class="card">
          <h3>
            <span class="point"></span>
            粉丝数量
          </h3>
          <h1>
            <i class="iconfont">&#xe7c2;</i>
            300
          </h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card">
          <h3>
            <span class="point"></span>
            男粉丝数量
          </h3>
          <h1>
            <i class="iconfont">&#xe6f9;</i>
            300
          </h1>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="card">
          <h3>
            <span class="point"></span>
            女粉丝数量
          </h3>
          <h1>
            <i class="iconfont">&#xe7b2;</i>
            300
          </h1>
        </div>
      </el-col>
    </el-row>
    <h3 class="h3" style="margin-top: 20px">
      <div><span class="tag"></span> 近30天涨粉及掉粉</div>
      <div>
        <el-date-picker
          size="small"
          v-model="timeArr"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="timeOptions"
          value-format="yyyy-MM-dd"
          @change="focus"
        >
        </el-date-picker>
        <el-button class="btn" icon="el-icon-search" size="small"
          >查询搜索</el-button
        >
        <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button>
      </div>
    </h3>
    <div class="echart">
      <div id="echartsA" style="width: 100%; height: 100%"></div>
    </div>
    <h3 class="h3" style="margin-top: 20px">
      <div><span class="tag"></span> 粉丝榜单</div>
    </h3>
    <div class="searchBox1">
      <el-radio-group size="small" v-model="type" fill="#7b94d8">
        <el-radio-button label="">全部粉丝</el-radio-button>
        <el-radio-button label="1">男粉丝</el-radio-button>
        <el-radio-button label="2">女粉丝</el-radio-button>
      </el-radio-group>
      <div>
        <el-select size="small" v-model="sort" placeholder="请选择">
          <el-option label="关注时间降序" value="1"> </el-option>
          <el-option label="贡献降序" value="2"> </el-option>
        </el-select>
        <!-- <el-button icon="el-icon-paperclip" size="small">导出EXCEL</el-button> -->
      </div>
    </div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: 10px"
      :header-cell-style="{ background: '#f5f7fa' }"
    >
      <template slot="empty">
        <el-empty :image-size="200"></el-empty>
      </template>
      <el-table-column prop="name" label="粉丝ID"> </el-table-column>
      <el-table-column prop="address" label="粉丝昵称"> </el-table-column>
      <el-table-column prop="address" label="粉丝贡献"> </el-table-column>
      <el-table-column prop="address" label="当前在粉"> </el-table-column>
      <el-table-column prop="address" label="成为粉丝时间">
        <template slot-scope="scope">
          <el-button type="info" plain size="small" @click="look(scope.row)"
            >查看详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <pagination
      :total="total"
      :page.sync="page"
      :limit.sync="pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      timeArr: [],
      startTime: "",
      endTime: "",
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      tableData: [{}],
      total: 0,
      page: 1,
      pageSize: 10,
      type: "",
      sort: "1",
    };
  },
  methods: {
    focus() {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    getList() {},
    echartsInit() {
      this.myChartA = this.$echarts.init(document.getElementById("echartsA"));
    },
    setChartOptionA() {
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartA.setOption({
        color: colors,

        tooltip: {
          trigger: "none",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["涨粉", "掉粉"],
        },
        grid: {
          top: 70,
          bottom: 50,
        },
        xAxis: [
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[1],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "涨粉  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "2016-1",
              "2016-2",
              "2016-3",
              "2016-4",
              "2016-5",
              "2016-6",
              "2016-7",
              "2016-8",
              "2016-9",
              "2016-10",
              "2016-11",
              "2016-12",
            ],
          },
          {
            type: "category",
            axisTick: {
              alignWithLabel: true,
            },
            axisLine: {
              onZero: false,
              lineStyle: {
                color: colors[0],
              },
            },
            axisPointer: {
              label: {
                formatter: function (params) {
                  return (
                    "掉粉  " +
                    params.value +
                    (params.seriesData.length
                      ? "：" + params.seriesData[0].data
                      : "")
                  );
                },
              },
            },
            data: [
              "2015-1",
              "2015-2",
              "2015-3",
              "2015-4",
              "2015-5",
              "2015-6",
              "2015-7",
              "2015-8",
              "2015-9",
              "2015-10",
              "2015-11",
              "2015-12",
            ],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "掉粉",
            type: "line",
            xAxisIndex: 1,
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
              2.3,
            ],
          },
          {
            name: "涨粉",
            type: "line",
            smooth: true,
            emphasis: {
              focus: "series",
            },
            data: [
              3.9, 5.9, 11.1, 18.7, 48.3, 69.2, 231.6, 46.6, 55.4, 18.4, 10.3,
              0.7,
            ],
          },
        ],
      });
    },
    //查看详情
    look(obj) {
      this.dialogTableVisible = true;
    },
  },
  mounted() {
    this.echartsInit();
    this.setChartOptionA();
  },
};
</script>

<style lang="less" scoped>
.Fans {
  .h3 {
    margin: 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    div {
      display: flex;
      align-items: center;
    }
    .tag {
      display: inline-block;
      width: 5px;
      height: 18px;
      background-color: #7b94d8;
      margin-right: 10px;
    }
  }
  .searchBox {
    text-align: right;
  }
  .cardRow {
    margin-top: 20px;
    .card {
      height: 120px;
      border: 2px solid #ebeff8;
      border-radius: 5px;
      h3 {
        display: flex;
        align-items: center;
        padding-left: 10px;
        .point {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
          border: 5px solid #7b94d8;
          margin-right: 10px;
        }
      }
      h1 {
        margin: 0px 0;
        text-align: right;
        padding-right: 20px;
        i {
          color: #7b94d8;
        }
      }
    }
  }
  .echart {
    width: 100%;
    height: 400px;
    margin-top: 20px;
  }
  .searchBox1 {
    margin-top: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}
</style>